import React, {useState} from 'react';
import {
  Drawer,
  List,
  Card,
  Button,
  Badge,
  Typography,
  Divider,
  Space,
  Tag,
  FloatButton,
  Col,
  Row,
  Image,
  Tooltip
} from 'antd';
import {ShoppingCartOutlined, DeleteOutlined, InfoCircleOutlined} from '@ant-design/icons';
import {API} from "@/services/typings";
import {downloadFileUrl} from "@/services/system/file";
import defaultImage from '@/assets/images/water2.jpg'

const {Text, Title} = Typography;

interface CartDrawerProps {
  cartItems: API.IOrderDetail[];
  onRemove: (productId: string) => void;
  onCheckout: () => void;
}

const CartDrawer: React.FC<CartDrawerProps> = ({cartItems, onRemove, onCheckout}) => {
  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };

  // 计算购物车总金额
  const totalAmount = cartItems.reduce((sum, item) => sum + item.totalPrice, 0);

  // 计算总商品数
  const totalItems = cartItems.reduce((sum, item) => sum + item.number, 0);

  return (
    <>
      {/* 悬浮购物车按钮 */}
      <FloatButton
        icon={<ShoppingCartOutlined/>}
        type="primary"
        badge={{count: totalItems}}
        onClick={showDrawer}
        style={{right: 24, bottom: 160, width: 48, height: 48}}
        tooltip="查看购物车"
      />

      {/* 购物车抽屉 */}
      <Drawer
        title="我的购物车"
        placement="right"
        onClose={onClose}
        open={open}
        width={500}
        extra={
          <Button type="primary" onClick={onCheckout} disabled={cartItems.length === 0}>
            去结算
          </Button>
        }
      >
        {cartItems.length === 0 ? (
          <div style={{textAlign: 'center', marginTop: 48}}>
            <ShoppingCartOutlined style={{fontSize: 48, color: '#ccc'}}/>
            <p style={{marginTop: 16}}>购物车是空的，快去选购商品吧</p>
          </div>
        ) : (
          <>
            <List
              itemLayout="horizontal"
              dataSource={cartItems}
              renderItem={(item) => (
                <List.Item>
                  <Card
                    size="small"
                    style={{width: '100%'}}
                    bodyStyle={{padding: '12px'}}
                  >
                    <Row gutter={16} align="middle">
                      {/* 商品图片 */}
                      <Col span={6}>
                        <Image
                          src={item.coverImage ? downloadFileUrl(item.coverImage) : defaultImage}
                          alt={item.productName}
                          style={{width: '100%', borderRadius: 4}}
                          preview={false}
                        />
                      </Col>

                      {/* 商品信息 */}
                      <Col span={18}>
                        <Space direction="vertical" style={{width: '100%'}}>
                          {/* 商品名称和品牌 */}
                          <div>
                            <Text strong style={{fontSize: 16}}>{item.productName}</Text>
                            <Space style={{marginLeft: 8}}>
                              <Tag color="blue">{item.brandName}</Tag>
                              <Tag color="green">{item.modelTypeName}</Tag>
                            </Space>
                          </div>

                          {/* 价格和数量 */}
                          <Row justify="space-between" align="middle">
                            <Col>
                              <Text type="danger" strong style={{fontSize: 16}}>
                                ¥{item.unitPrice.toFixed(2)}
                              </Text>
                              {item.payablePrice > item.actualPrice && (
                                <Text type="secondary" delete style={{marginLeft: 8}}>
                                  ¥{item.payablePrice.toFixed(2)}
                                </Text>
                              )}
                            </Col>
                            <Col>
                              <Text>数量: {item.number} {item.unit || '件'}</Text>
                              {item.actualNum > item.number && (
                                <Tooltip title="赠送商品">
                                  <Tag color="success" style={{marginLeft: 8}}>
                                    +{item.actualNum - item.number}
                                  </Tag>
                                </Tooltip>
                              )}
                            </Col>
                          </Row>

                          {/* 其他信息 */}
                          <Row gutter={16}>
                            <Col span={12}>
                              <Space>
                                <InfoCircleOutlined/>
                                <Text type="secondary">水票: {item.ticketNum}张</Text>
                              </Space>
                            </Col>
                            {item.needReturn === '0' && (
                              <Col span={12}>
                                <Space>
                                  <InfoCircleOutlined/>
                                  <Text type="secondary">
                                    押金: {item.gouTongNumber}桶 × {item.tongPrice}元
                                  </Text>
                                </Space>
                              </Col>
                            )}
                          </Row>

                          {/* 小计和删除按钮 */}
                          <Row justify="space-between" align="middle">
                            <Col>
                              <Text strong>小计: </Text>
                              <Text strong style={{fontSize: 16}}>¥{(item.finalPrice || 0)?.toFixed(2)}</Text>
                            </Col>
                            <Col>
                              <Button
                                type="text"
                                icon={<DeleteOutlined/>}
                                danger
                                onClick={() => onRemove(item?.productId)}
                              />
                            </Col>
                          </Row>
                        </Space>
                      </Col>
                    </Row>
                  </Card>
                </List.Item>
              )}
            />

            <Divider/>

            <div style={{padding: '0 16px'}}>
              <Row justify="space-between" align="middle">
                <Col>
                  <Text strong>共 {totalItems} 件商品</Text>
                </Col>
                <Col>
                  <Title level={4} style={{margin: 0}}>
                    合计: ¥{totalAmount.toFixed(2)}
                  </Title>
                </Col>
              </Row>

              <Button
                type="primary"
                block
                size="large"
                onClick={onCheckout}
                style={{marginTop: 24}}
              >
                去结算 ({cartItems.length}件商品)
              </Button>
            </div>
          </>
        )}
      </Drawer>
    </>
  );
};

export default CartDrawer;
